<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../css/app.css" />
		<style type="text/css">
			.mui-content>.mui-table-view:first-child {
				margin-top: 0px;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<ul id="list" class="mui-table-view mui-table-view-chevron"></ul>
		</div>
	</body>
	
	<script src="../js/mui.min.js "></script>
	<script src="../js/mui.lazyload.js"></script>
	<script src="../js/mui.lazyload.img.js"></script>
	<script>
		mui.init();
		
		var url = "http://s.music.163.com/search/get/";       
        mui.ajax(url,{
			data: {
                'type': 1,
                's': "喜欢你",
                'limit': 10
            },
			dataType:'json',//服务器返回json格式数据
			type:'post',//HTTP请求类型
			timeout:10000,//超时时间设置为10秒；
			success:function(data){
				//console.log(JSON.stringify(data));
				var songs=data.result.songs;

				var list = document.getElementById("list");
				var fragment = document.createDocumentFragment();
				var li;
				mui.each(songs,function(index,item){
				    //console.log(JSON.stringify(item.album.picUrl));
				     var id = item.id,
				        name = item.album.name,
				        author = item.artists[0].name,
				    	picUrl = item.album.picUrl,
				    	audio = item.audio;	  
				    	
				    li = document.createElement('li');
					li.className = 'mui-table-view-cell mui-media';
					li.innerHTML = '<a class="mui-navigate-right" id='+ id +' data-audio='+ audio +'>'+
					    				'<img class="mui-media-object mui-pull-left" data-lazyload="'+picUrl+'">'+
					    				'<div class="mui-media-body">'+name+
					    					'<p class="mui-ellipsis">'+author+'</p>'+
					    				'</div>'+
					    			'</a>';
					fragment.appendChild(li);
				})
				
				list.appendChild(fragment)
				
				mui(document).imageLazyload({
					placeholder: '../img/60x60.gif'
				});
			},
			error:function(xhr,type,errorThrown){
				//异常处理；
				console.log(type);
			}
		});
		
	    //列表点击事件
		mui("#list").on('tap','li a',function(){
			var id = this.getAttribute('id');
			var audio = this.getAttribute('data-audio');
			//打开详情页面
			mui.openWindow({
				url:'music.html',
			    id:'music.html',
			    extras:{
			        musicId:id,
			        audioUrl:audio
			    }
			});
		});
	</script>
</html>
